<template>
	<view class="containner">
		<view class="header">
			<view class="user">
				<view class="head">
					<image :src="user.avatarUrl" class="head-img"></image>
				</view>
				<view class="info">
					<view class="name">{{ user.nickName }}</view>
					<view class="progress"><text class="big">进</text>度</view>
					<view class="progress-icon">
						<view class="crown-icon">
							<image src="http://qiniu.disciplineeducation.com/studyIcons/crown-light.png">
						</view>
						<view class="star-icon">
							<image src="http://qiniu.disciplineeducation.com/studyIcons/star-light.png">
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="box">
			<view class="tabs">
				<u-tabs :list="tabs" @click="handleClickTab" lineColor="#575757" :lineHeight="4"></u-tabs>
			</view>
			<view class="list" v-if="!isEmpty">
				<view class="item" v-for="(item,index) in list" :key="index">
					<view class="info">
						<view class="tag" v-if="item.is_finished==1">完成</view>
						<view class="status">
							<view class="icon">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/progress-complate.png" v-if="item.is_finished==1">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/progress-uncomplate.png" v-else>
							</view>
						</view>
						<view class="name">{{ item.course_name }}</view>
					</view>

					<view class="progress-info">
						<view class="progress-item" v-for="(sub_item,sub_index) in item.progress_list" :key="sub_index" @click="handleClickItem(sub_item,sub_index)">
							<view class="crown-icon">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/crown-light.png" v-if="sub_item.crown_status == 1">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/crown-gray.png" v-else>
							</view>
							<view class="star-icon">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/star-light.png" v-if="sub_item.star_status == 1">
								<image src="http://qiniu.disciplineeducation.com/studyIcons/start-gray.png" v-else>
							</view>
						</view>
					</view>

				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="isEmpty"></u-empty>
		</view>
		<popup-view v-if="showPopup" @onConfirm="onConfirm" @onCancel="onCancel" :content="popupContent"></popup-view>
	</view>
</template>

<script>
	import PopupView from '@/pages/components/PopupView.vue'
	export default {
		components:{
			PopupView
		},
		data() {
			return {
				tabs: [],
				list: [],
				checkAll: false,
				type: 1,
				progress: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
				user:{},
				item:{},
				showPopup:false,
				popupContent:''
			}
		},
		onShareAppMessage(res){
			return this.$utils.onShareAppMessage();
		},
		onLoad(options) {
			this.type = options.type;
			this.user = uni.getStorageSync('user')
			this.getList();
		},
		computed:{
			isEmpty(){
				return this.list.length === 0
			}
		},
		methods: {
			async getList() {
				const res = await this.$http.get(`/wechatmini`)

				if (res.code == 0) {
					let tabs = [];
					res.data.course_levels.forEach(item => {
						tabs.push({
							name: item.course_level_name,
							id:item.course_level_id
						})
					})
					this.tabs = tabs;
					this.getSubList(tabs[0].id)

				}

			},
			async getSubList(id){
				const res = await this.$http.get(`/wechatmini/study/progress?course_level_id=${id}`)
				if(res.code == 0){
					this.list = res.data.list;
				}
			},
			handleClickTab(item) {
				this.getSubList(item.id);
			},
			handleClickItem(item,index){
				this.item = {...item};
				this.item['index'] = index;
				this.popupContent = `ꔷ 本节为：${item.course_question_set_name},是否跳转查看`
				this.showPopup = true;
			},
			onConfirm(){
				this.showPopup = false;
				this.toDetail()
			},
			onCancel(){
				this.showPopup = false;
			},
			toDetail(){
				uni.navigateTo({
					url: `/pages/detail/index?id=${this.item.course_id}`
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #f0f0f0;
	}
</style>
<style scoped lang="scss">
	.header {
		overflow: hidden;
		padding-top: 40rpx;
		padding-bottom: 70rpx;
		background-color: #e5f26f;
		padding-bottom: 120rpx;

		.user {
			width: 80%;
			margin: 0 auto;
			margin-top: 30rpx;

			.head-img {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				vertical-align: middle;
			}

			.info {
				display: flex;
				flex-wrap: wrap;
				.name {
					color: #57565b;
					font-weight: bold;
					line-height: 1;
					width:110rpx;
					text-align: center;
					margin-top:10rpx;
				}

				.progress {
					color: #57565b;
					font-weight: bold;
					margin-left: 40rpx;
					font-size: 32rpx;
					line-height: 1;

					.big {
						font-size: 45rpx;
						margin-right: 10rpx
					}
				}

				.progress-icon {
					position: relative;
					top: -18rpx;
					margin-left:10rpx;
					.crown-icon {
						line-height: 1;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.star-icon {
						line-height: 1;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}

		}
	}



	.box {
		background-color: #f0f0f0;
		border-radius: 40rpx;
		padding-bottom: 30rpx;
		margin-top: -60rpx;
		position: relative;
		z-index: 99;

		.list {
			margin: 40rpx 40rpx 0 40rpx;

			.item {
				display: flex;
				min-height: 240rpx;
				position: relative;
				margin-bottom: 30rpx;
				border-radius: 40rpx;
				background-color: #f8f8f8;
				text-align: center;
				border: 1rpx solid #717171;

				.info {
					display: flex;
					align-items: center;
					width: 40%;
					position: relative;

					.tag {
						position: absolute;
						top: 50%;
						margin-top: 24rpx;
						margin-left: 10rpx;
						color: #4c5c58;
						font-size: 28rpx;
					}

					.name {
						color: #4c5c58;
						font-size: 32rpx;
						font-weight: bold;
						margin-left: 10rpx;
					}

					.status {
						margin-left: 30rpx;

						.icon {
							image {
								width: 55rpx;
								height: 55rpx
							}
						}
					}
				}

				.progress-info {
					display: flex;
					flex-wrap: wrap;
					width:60%;
					padding-top:20rpx;
					.progress-item {
						width: 20%;
						text-align: center;
						margin-bottom:20rpx;
						.crown-icon {
							line-height: 1;
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
						
						.star-icon {
							line-height: 1;
							image {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}


			}

			.item.active {
				border: 6rpx solid #9ddab7;
				background-color: #f7fbfa;
			}
		}

	}
	
</style>
